import React from 'react'
import have from '../../../assets/img/have.jpeg'
import no from '../../../assets/img/no.jpeg'
import "./shoplist.less"
import { withRouter } from "react-router-dom"
function Goods(props) {
    let { shopList, allChecked, allPrice } = props
    return (
        <div className="shopgoods">
            {
                shopList.map((item, index) => (
                    <div className="wrap" key={item.id}>
                        <div className="selectbox" onClick={() => props.changeOne(index)}>
                            {
                                item.checked ? <img src={have} alt="" /> : <img src={no} alt="" />
                            }
                        </div>
                        <div className="imgbox">
                            <img src={item.img} alt="" />
                        </div>
                        <div className="goodscon">
                            <div className="title">{item.goodsname}</div>
                            <div className="price">
                                <p><span>&yen;</span>{(item.price * item.num)}</p>
                                <div>
                                    <button onClick={() => props.sub(item.id, item.num)}>-</button>
                                    <span>{item.num}</span>
                                    <button onClick={() => props.plus(item.id)}>+</button>
                                    <button className="del" onClick={() => props.del(item.id)}>删除</button>
                                </div>
                            </div>
                        </div>
                    </div>
                ))
            }
            <div className="shopfooter">
                {/* 引入照片，判断是否全选 */}
                <div className="selectbox" onClick={() => props.changeAll()}>
                    {
                        allChecked ? <img src={have} alt="" /> : <img src={no} alt="" />
                    } <span>全选</span>
                </div>
                <div className="allprice">合计：<span>&yen;{(allPrice)}</span></div>
                <button className="go" onClick={() => props.history.push("/order")}>去结算</button>
            </div>
        </div>
    )
}
export default withRouter(React.memo(Goods))